/* Fecha comentario: 2026-05-21 — demo Audience / wizard nueva campaña */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap');
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#F0F4F9;--surface:#FFFFFF;--surface-variant:#E1E3E1;--surface-container:#F3F4F6;
  --primary:#957AFB;--on-primary:#FFFFFF;--primary-container:#EDE8FF;--on-primary-container:#3D3558;
  --secondary:#6B6378;--secondary-container:#EDE8FF;
  --success:#146C2E;--success-container:#C4EECE;--success-on-container:#0A4D1F;
  --danger:#B3261E;--danger-container:#F9DEDC;--danger-on-container:#6B1510;
  --accent:#B06400;--accent-container:#FFDDAF;--accent-on-container:#5C3800;
  --bar-success:#22C55E;--bar-danger:#B3261E;--bar-accent:#F59E0B;--bar-primary:#8B5CF6;
  --border:#C7C7C7;--text:#1D1B20;--text-2:#49454F;--text-3:#79747E;
  --sidebar-w:220px;--r-card:24px;--r-btn:100px;
  --elevation-1:0 1px 2px 0 rgba(0,0,0,0.3),0 1px 3px 1px rgba(0,0,0,0.15);
  --elevation-soft:0 1px 3px rgba(0,0,0,0.04);
  --card-border:rgba(0,0,0,0.03);--shadow-hover:0 2px 6px rgba(0,0,0,0.06);
  --row-hover:rgba(29,27,32,0.04);--hover-bg:rgba(29,27,32,0.08);--hover-bg-light:rgba(29,27,32,0.06);
  --scrollbar-thumb:rgba(0,0,0,0.2);--scrollbar-thumb-hover:rgba(0,0,0,0.25);
  --sidebar-shadow:4px 0 24px rgba(0,0,0,0.12);--backdrop:rgba(0,0,0,0.35);
  --flag-border:rgba(0,0,0,0.1);--theme-ease:0s ease-in-out;
}
html[data-theme-transition]{--theme-ease:0.5s ease-in-out}
[data-theme="dark"]{
  --bg:#121212;--surface:#1E1E1E;--surface-variant:#2D2D2D;--surface-container:#252525;
  --primary:#B794F6;--on-primary:#FFFFFF;--primary-container:#3D3558;--on-primary-container:#EDE8FF;
  --secondary-container:#3D3558;--success:#66BB6A;--success-container:#1B3D1E;--success-on-container:#C4EECE;
  --danger:#EF9A9A;--danger-container:#4A1C1C;--danger-on-container:#F9DEDC;
  --accent:#FFB74D;--accent-container:#5C3800;--accent-on-container:#FFDDAF;
  --border:#3D3D3D;--text:#E6E1E5;--text-2:#CAC4D0;--text-3:#938F99;
  --elevation-1:0 1px 2px 0 rgba(0,0,0,0.5),0 1px 3px 1px rgba(0,0,0,0.3);
  --elevation-soft:0 1px 3px rgba(0,0,0,0.2);--card-border:rgba(255,255,255,0.06);
  --shadow-hover:0 4px 12px rgba(0,0,0,0.3);--row-hover:rgba(255,255,255,0.04);
  --hover-bg:rgba(255,255,255,0.08);--hover-bg-light:rgba(255,255,255,0.06);
  --scrollbar-thumb:rgba(255,255,255,0.2);--scrollbar-thumb-hover:rgba(255,255,255,0.3);
  --sidebar-shadow:4px 0 24px rgba(0,0,0,0.4);--backdrop:rgba(0,0,0,0.6);--flag-border:rgba(255,255,255,0.15);
}
body{font-family:'Roboto',sans-serif;background:var(--bg);color:var(--text);display:flex;min-height:100vh;font-size:14px;letter-spacing:0.1px;transition:background-color var(--theme-ease),color var(--theme-ease)}
.sidebar{width:var(--sidebar-w);height:100vh;height:100dvh;min-height:100vh;background:var(--surface);border-right:1px solid var(--surface-variant);display:flex;flex-direction:column;position:fixed;left:0;top:0;bottom:0;z-index:100;overflow:hidden;transition:transform .35s cubic-bezier(0.4,0,0.2,1),background-color var(--theme-ease),border-color var(--theme-ease)}
body.sidebar-hidden .sidebar{transform:translateX(-100%)}
.s-logo{display:flex;align-items:center;gap:10px;padding:16px 20px;flex-shrink:0}
#menuCloseSidebar.s-close{display:none;pointer-events:none;visibility:hidden}
.nav-logo{display:flex;align-items:center;text-decoration:none;gap:8px}
.nav-logo img{display:block;height:auto;max-width:100px;vertical-align:middle}
.s-logo .flag-wrapper{position:relative;right:auto!important;display:flex;align-items:center;flex-shrink:0;top:0px!important}
.s-logo .flag-img{width:24px;height:18px;object-fit:cover;border-radius:2px;border:1px solid var(--flag-border);vertical-align:middle}
.flag-tooltip{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);margin-bottom:6px;padding:6px 10px;background:var(--text);color:var(--surface);font-size:12px;font-weight:500;border-radius:6px;white-space:nowrap;opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s;pointer-events:none}
.flag-wrapper:hover .flag-tooltip{opacity:1;visibility:visible}
.s-nav{flex:1 1 0;min-height:0;padding:0 8px;display:flex;flex-direction:column;gap:2px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch}
.s-nav::-webkit-scrollbar{width:0;height:0;display:none}
.s-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:20px;color:var(--text-2);cursor:pointer;font-size:13px;font-weight:500;transition:background .2s;text-decoration:none}
.s-item:hover{background:var(--hover-bg)}
.s-item.active{background:var(--primary-container);color:var(--on-primary-container)}
.s-lbl{font-size:11px;font-weight:600;color:var(--text-3);padding:12px 12px 4px;text-transform:uppercase;letter-spacing:.05em}
.ni{width:20px;height:20px;flex-shrink:0;stroke-width:2px}
.s-item.active .ni{stroke-width:2.5px}
.s-foot{flex-shrink:0;margin-top:auto;padding:12px 8px max(16px, env(safe-area-inset-bottom, 0px));background:var(--surface);position:relative;z-index:2}
.out-btn{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:20px;color:var(--text-2);cursor:pointer;font-size:13px;font-weight:500;transition:background .2s;text-decoration:none}
.out-btn:hover{background:var(--danger-container);color:var(--danger)}
.main{margin-left:var(--sidebar-w);flex:1;display:flex;flex-direction:column;min-height:100vh;overflow:auto;transition:margin-left .35s cubic-bezier(0.4,0,0.2,1)}
body.sidebar-hidden .main{margin-left:0}
.topbar{background:var(--surface);border-bottom:1px solid var(--surface-variant);padding:16px 24px;min-height:75px;height:auto;display:flex;align-items:center;justify-content:space-between;gap:20px;position:sticky;top:0;z-index:95;flex-shrink:0;flex-wrap:nowrap}
.topbar .tl{flex-shrink:0}
.topbar .tr{flex-shrink:0;margin-left:auto}
.topbar .page-header{flex:1;min-width:0;margin:0;display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:0;min-height:0}
.topbar .ph-left{display:flex;flex-direction:column;align-items:flex-start;text-align:left;width:100%;min-width:0}
.topbar .ph-title{margin-bottom:2px}
.topbar .ph-desc{margin:0}
.topbar .ph-right{align-self:flex-start;display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-start;width:100%;max-width:100%}
.tl{display:flex;align-items:center;gap:12px}
.menu-toggle{width:36px;height:36px;border-radius:50%;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-2);transition:background .2s;flex-shrink:0}
.menu-toggle:hover{background:var(--hover-bg)}
.menu-toggle svg{width:22px;height:22px}
.tl-text{display:flex;flex-direction:column}
.tl h1{font-size:20px;font-weight:500;color:var(--text);line-height:1.2;margin:0}
.tl-desc{font-size:12px;color:var(--text-2);margin-top:2px;font-weight:400}
.tr{display:flex;align-items:center;gap:12px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 24px;border-radius:var(--r-btn);font-size:14px;font-weight:500;cursor:pointer;border:none;transition:all .2s;white-space:nowrap;font-family:inherit;text-decoration:none}
.btn:hover,.btn:focus{text-decoration:none}
.bo{background:transparent;border:1px solid var(--text-3);color:var(--primary)}
.bo:hover{background:var(--primary-container);color:var(--on-primary-container);border-color:var(--primary)}
.ba{background:var(--primary);color:var(--on-primary);box-shadow:var(--elevation-soft)}
.ba:hover{background:rgba(149,122,251,0.88);box-shadow:var(--elevation-1)}
.bp{background:var(--secondary-container);color:var(--on-primary-container)}
.bp:hover{background:rgba(237,232,255,0.8)}
.ib{width:40px;height:40px;border-radius:50%;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-2);transition:background .2s;position:relative;text-decoration:none}
.ib:hover{background:var(--hover-bg)}
.theme-switch{display:flex;align-items:center;border:none;background:transparent;cursor:pointer;padding:4px;border-radius:100px;transition:background .2s}
.theme-switch:hover{background:var(--hover-bg)}
.theme-switch-track{width:48px;height:26px;border-radius:13px;background:var(--surface-container);position:relative}
.theme-switch-thumb{position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;background:var(--primary);color:var(--on-primary);display:flex;align-items:center;justify-content:center;transition:transform .25s cubic-bezier(0.4,0,0.2,1);box-shadow:var(--elevation-soft)}
.theme-switch-icon{width:14px;height:14px}
.theme-switch-thumb .theme-icon-moon{display:none}
.theme-switch-thumb .theme-icon-sun{display:block}
[data-theme="dark"] .theme-switch-thumb{transform:translateX(22px)}
[data-theme="dark"] .theme-switch-thumb .theme-icon-sun{display:none}
[data-theme="dark"] .theme-switch-thumb .theme-icon-moon{display:block}
.av-dropdown{position:relative}
.av-btn{display:flex;align-items:center;gap:8px;padding:4px 16px 4px 4px;border-radius:var(--r-btn);background:transparent;cursor:pointer;font-size:14px;font-weight:500;transition:background .2s;border:none;font-family:inherit}
.av-btn:hover{background:var(--hover-bg)}
.av{width:32px;height:32px;background:var(--primary);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--on-primary);font-size:13px;font-weight:500}
.av-dropdown .av-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:225px;background:var(--surface);border-radius:12px;box-shadow:var(--elevation-1);border:1px solid var(--surface-variant);padding:8px;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .2s,transform .2s,visibility .2s;z-index:1100}
.av-dropdown.open .av-menu{opacity:1;visibility:visible;transform:translateY(0)}
.av-dd-item{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:8px;cursor:pointer;font-size:14px;font-weight:500;color:var(--text);transition:background .2s;text-align:left;width:100%;border:none;background:none;font-family:inherit;text-decoration:none}
.av-dd-item .av-dd-icon{width:20px;height:20px;flex-shrink:0;stroke:currentColor}
.av-dd-item:hover{background:var(--hover-bg-light)}
.av-dd-item.logout:hover{background:var(--danger-container);color:var(--danger)}
.content{padding:0px;flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;background:var(--bg)}
/* Topbar minimal */
.topbar-minimal .tl{flex:0}
.topbar-minimal .tr{margin-left:auto}
/* Page Header: en .content (legacy) fila título | acciones; en .topbar va apilado (ph-right bajo ph-title, alineado a la izquierda) */
.page-header{display:flex;align-items:center;justify-content:space-between;gap:32px;margin-bottom:40px;flex-wrap:nowrap;min-height:56px}
.content .page-header{margin-bottom:40px}
.ph-left{flex:1;min-width:0}
.ph-title{font-size:24px;font-weight:500;color:var(--text);margin:0 0 8px;line-height:1.3;transition:color var(--theme-ease)}
.ph-desc{font-size:14px;color:var(--text-2);margin:0;font-weight:400;line-height:1.4;transition:color var(--theme-ease)}
.ph-right{flex-shrink:0;align-self:center}
.ph-right .btn{display:inline-flex;align-items:center;gap:8px}
.ph-right .btn-txt{font-size:14px;font-weight:500}
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-thumb{background:var(--surface-variant);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:var(--text-3)}
.sidebar-backdrop{display:none;pointer-events:none}
@media (max-width:768px){
  body{overflow-x:clip;max-width:100%}
  .main{margin-left:0!important;min-width:0;max-width:100%;width:100%;overflow-x:clip}
  .content{min-width:0;max-width:100%;width:100%;padding:24px 20px;overflow-x:clip;box-sizing:border-box}
  .page-header{flex-direction:column;align-items:stretch;gap:20px;margin-bottom:48px;min-height:0}
  .ph-right{align-self:stretch}
  .ph-right .btn{width:100%;justify-content:center}
  .topbar{flex-wrap:wrap;min-height:0;padding:12px 16px;row-gap:8px}
  /* En mobile, la página queda en una franja propia debajo de [menu | acciones] para que el título y la
     descripción nunca compitan por el ancho con los íconos. */
  .topbar .page-header{flex:1 1 100%;width:100%;order:10;margin:0;align-items:flex-start;text-align:left}
  .topbar .ph-left{align-items:flex-start;text-align:left;width:100%}
  /* Tipografía adaptativa: escala suavemente entre móviles chicos (~320px) y tablets (768px). */
  .topbar .ph-title{font-size:clamp(15px,3.8vw,18px);line-height:1.2;margin:0 0 2px;font-weight:500;white-space:normal;overflow:visible;text-overflow:clip}
  .topbar .ph-desc{font-size:clamp(11px,2.9vw,13px);line-height:1.35;color:var(--text-2);white-space:normal}
  .topbar .ph-right .btn{width:100%;justify-content:center}
  .sidebar{
    z-index:300;box-shadow:var(--sidebar-shadow);overflow:hidden;max-height:100dvh;height:100dvh;
    display:grid;grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:1fr
  }
  .sidebar .s-logo{grid-row:1}
  .sidebar .s-nav{grid-row:2;flex:none;min-height:0;max-height:none;overflow-y:auto;overflow-x:hidden}
  .sidebar .s-foot{grid-row:3;margin-top:0;flex-shrink:0}
  /* Botón fuera del aside: mitad dentro / mitad fuera, sin recortar el pie del menú */
  body:not(.sidebar-hidden) #menuCloseSidebar.s-close{
    display:flex;visibility:visible;pointer-events:auto;
    position:fixed;left:calc(var(--sidebar-w) - 22px);top:calc(16px + env(safe-area-inset-top,0px));
    right:auto;width:44px;height:44px;border-radius:50%;background:var(--primary-container);color:var(--primary);
    border:none;cursor:pointer;align-items:center;justify-content:center;box-shadow:var(--elevation-1);z-index:303
  }
  body:not(.sidebar-hidden) #menuCloseSidebar.s-close:hover{background:var(--primary);color:var(--on-primary)}
  body:not(.sidebar-hidden) #menuCloseSidebar.s-close svg{width:22px;height:22px}
  body.sidebar-hidden #menuCloseSidebar.s-close{display:none;visibility:hidden;pointer-events:none}
  .sidebar-backdrop{display:block;pointer-events:auto;position:fixed;inset:0;background:var(--backdrop);z-index:299;opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
  body:not(.sidebar-hidden) .sidebar-backdrop{opacity:1;visibility:visible}
  .topbar{padding:12px 16px;height:auto;min-height:56px;flex-wrap:wrap;gap:8px}
  /* `.tl { flex:1 }` sólo aplica cuando hay texto descriptivo en `.tl-text`; si la topbar usa
     page-header, el menu-toggle queda en su tamaño natural y la fila queda balanceada. */
  .tl{min-width:0;flex:0 0 auto}
  .tl:has(.tl-text){flex:1}
  .tl-text{min-width:0;overflow:hidden}
  .tl h1{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px}
  .tl-desc{display:none}
  .tr{flex-shrink:0;gap:6px}
  .topbar .btn{width:32px;height:32px;min-width:32px;padding:0;border-radius:50%;justify-content:center}
  .topbar .btn .btn-txt{display:none}
  .topbar .tr .ib{width:32px;height:32px}
  .topbar .av-btn{padding:4px}
  .theme-switch-track{width:42px;height:22px;border-radius:11px}
  .theme-switch-thumb{width:18px;height:18px;top:2px;left:2px}
  .theme-switch-thumb .theme-switch-icon{width:12px;height:12px}
  [data-theme="dark"] .theme-switch-thumb{transform:translateX(20px)}
  .topbar .theme-switch{display:none!important}
  .topbar .btn-new-campaign{display:none!important}
  .theme-switch-sidebar{display:flex!important;align-items:center;width:100%;padding:10px 12px;border-radius:20px;border:none;background:transparent;cursor:pointer;font-family:inherit;text-align:left;color:var(--text-2)}
  .theme-switch-sidebar:hover{background:var(--hover-bg)}
  .theme-switch-sidebar .theme-switch-sidebar-lbl{flex:1}
  .theme-switch-sidebar .theme-switch-track{flex-shrink:0;margin-left:8px}
  /* Compactar sidebar en mobile para minimizar la chance de overflow que dispare el scroll. */
  .sidebar .s-logo{padding:12px 12px}
  .sidebar .s-item{padding:9px 12px}
  .sidebar .s-lbl{padding:10px 12px 4px}
  .sidebar .s-foot{
    padding:8px 8px max(16px, env(safe-area-inset-bottom, 0px));
    box-shadow:0 -1px 0 var(--surface-variant)
  }
}
.s-foot-divider{height:1px;border:none;background:var(--surface-variant);margin:8px 0}
.theme-switch-sidebar{display:none}
.fab{position:fixed;bottom:24px;right:24px;width:56px;height:56px;border-radius:50%;border:none;background:var(--primary);color:var(--on-primary);box-shadow:0 4px 12px rgba(0,0,0,.15);cursor:pointer;display:none;align-items:center;justify-content:center;z-index:45;transition:transform .2s;text-decoration:none}
.fab:hover{transform:scale(1.05);color:var(--on-primary)}
.fab svg{width:24px;height:24px}
@media (max-width:768px){.fab{display:flex!important}}

/* Modal Borrador de Campaña (diseño oscuro/limpio tipo Step 2) */
body.fx-cuenta-desactivada-open .main,
body.fx-cuenta-desactivada-open .fab{pointer-events:none;user-select:none}
body.fx-cuenta-desactivada-open #modalCuentaDesactivada{pointer-events:auto}
.md-draft-backdrop{position:fixed;inset:0;background:rgba(0,0,0,0.6);display:flex;align-items:center;justify-content:center;z-index:9998;opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s;backdrop-filter:blur(2px)}
.md-draft-backdrop.show{display:flex!important;opacity:1;visibility:visible}
.md-draft-dialog{background:var(--surface-container);border-radius:28px;padding:24px;width:100%;max-width:440px;display:flex;flex-direction:column;box-shadow:0 10px 30px rgba(0,0,0,.5);transform:scale(0.95) translateY(10px);transition:transform .3s cubic-bezier(0.175,0.885,0.32,1.275)}
[data-theme="dark"] .md-draft-dialog{box-shadow:0 10px 30px rgba(0,0,0,.6)}
.md-draft-backdrop.show .md-draft-dialog{transform:scale(1) translateY(0)}
.md-draft-icon{display:flex;justify-content:center;color:var(--primary);margin-bottom:16px}
.md-draft-icon svg{width:28px;height:28px}
.md-draft-title{color:var(--text);font-size:22px;font-weight:400;text-align:center;margin:0 0 16px}
.md-draft-content{color:var(--text-2);font-size:14px;text-align:center;margin-bottom:20px;line-height:1.5}
.md-draft-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px;margin-bottom:24px}
.md-draft-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.md-draft-badge{background:var(--primary-container);color:var(--primary);padding:4px 10px;border-radius:6px;font-size:11px;font-weight:600;letter-spacing:.5px;text-transform:uppercase}
.md-draft-date{font-size:12px;color:var(--text-3)}
.md-draft-card-title{font-size:15px;font-weight:600;color:var(--text);margin:0 0 4px}
.md-draft-subtitle{font-size:13px;color:var(--text-2);margin:0;display:flex;align-items:center;gap:6px}
.md-draft-subtitle svg{width:14px;height:14px;color:var(--text-3);flex-shrink:0}
.md-draft-actions{display:flex;justify-content:space-between;align-items:center;gap:12px}
.md-draft-btn-text{background:transparent;color:var(--text-2);border:none;padding:10px 16px;border-radius:100px;font-weight:500;font-size:14px;cursor:pointer;transition:all .2s;font-family:inherit}
.md-draft-btn-text:hover{background:var(--hover-bg);color:var(--text)}
.md-draft-btn-filled{background:var(--primary);color:var(--on-primary);border:none;padding:10px 24px;border-radius:100px;font-weight:500;font-size:14px;cursor:pointer;transition:background .2s;display:flex;align-items:center;gap:8px;font-family:inherit}
.md-draft-btn-filled:hover{background:rgba(149,122,251,.88)}
.md-draft-btn-filled svg{width:16px;height:16px}
.s-nav-msg{margin:0 14px 12px;padding:8px 0;font-size:12px;line-height:1.45;color:var(--text-3)}